<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
			<el-form-item label="岗位ID" prop="">
				<el-input v-model="queryParams.id" placeholder="岗位ID" clearable />
			</el-form-item>
			<el-form-item label="岗位名称" prop="jobName">
				<el-input v-model="queryParams.jobName" placeholder="岗位名称" clearable />
			</el-form-item>
			<el-form-item label="公司名称" prop="companyName">
				<el-input v-model="queryParams.companyName" placeholder="公司名称" clearable />
			</el-form-item>
			<el-form-item label="学历" prop="type">
				<el-select v-model="queryParams.educationcn" placeholder="学历" clearable @change="xlchange">
					<el-option v-for="dict in xlList" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="硕士类型" prop="type" v-if="queryParams.educationcn == '硕士'">
				<el-select v-model="queryParams.xsand" placeholder="硕士类型" clearable @change="sslxChange">
					<el-option v-for="dict in xsArr" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="专业类型" prop="type" v-if="queryParams.educationcn == '大专' || queryParams.educationcn == '本科'">
				<el-cascader v-model="queryParams.majorcnList" filterable :options="options" @change="handleChange" :props="props"></el-cascader>
			</el-form-item>
			<el-form-item  label="专业和详情内容" v-if="queryParams.educationcn == '大专' || queryParams.educationcn == '本科'">
				<el-cascader v-model="queryParams.majorContentsList" filterable :options="options" @change="handleChange" :props="props"></el-cascader>
			</el-form-item>
			<el-form-item label="专业类型" prop="type" v-if="queryParams.xsand == '学硕' || queryParams.xsand == '专硕'">
				<el-cascader v-model="queryParams.majorcnList" filterable :options="optionsZ" @change="handleChange" :props="propss"></el-cascader>
			</el-form-item>
			<el-form-item label="专业和详情内容" v-if="queryParams.xsand == '学硕' || queryParams.xsand == '专硕'">
				<el-cascader v-model="queryParams.majorContentsList" filterable :options="optionsZ" @change="handleChange" :props="propss"></el-cascader>
			</el-form-item>
			<el-form-item label="企业类型" prop="type">
				<el-select v-model="queryParams.qylx" filterable multiple placeholder="企业类型" clearable>
					<el-option v-for="dict in lxList" :key="dict.idd" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="岗位类型" prop="type">
				<el-select v-model="queryParams.naturecnList" filterable multiple placeholder="岗位类型" clearable>
					<el-option v-for="dict in gwList" :key="dict.idd" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
		
			<el-form-item label="详情内容" prop="contents">
				<el-input v-model="queryParams.contents" placeholder="详情内容" clearable />
			</el-form-item>
			
			<el-form-item label="地址" prop="type">
				<el-select v-model="queryParams.adders" filterable multiple placeholder="地址" clearable>
					<el-option v-for="dict in addList" :key="dict.id" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="不限专业" prop="bxzy">
				<el-select v-model="queryParams.bxzy"  placeholder="不限专业" clearable>
					<el-option label="是" value="1" />
					<el-option label="否" value="0" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				<!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button> -->
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<!-- <el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:documentary:add']">新增</el-button>
			</el-col> -->
			<!-- <el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['system:documentary:edit']">修改</el-button>
			</el-col> -->

			<!-- <el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['system:documentary:remove']">删除</el-button>
			</el-col> -->
			<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
		</el-row>

		<el-table v-loading="loading" :data="userList">
			<el-table-column show-overflow-tooltip label="岗位名称" width="" align="center" prop="jobName">
			</el-table-column>
			<el-table-column show-overflow-tooltip label="岗位类型" width="" align="center" prop="natureCn">
			</el-table-column>
			<el-table-column show-overflow-tooltip width="" label="招聘时间" align="center" prop="">
				<template slot-scope="scope">
					<div>{{scope.row.startTime}} - {{scope.row.endTime}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip width="" label="投递链接" align="center" prop="website" />
			<el-table-column show-overflow-tooltip width="" label="工作地点" align="center" prop="addrsss" />
			<el-table-column show-overflow-tooltip width="" label="学历要求" align="center" prop="educationCn" />
			<el-table-column show-overflow-tooltip width="" label="专业要求" align="center" prop="majorCn">
				<!-- 	<template slot-scope="scope">
						<div v-for="it in scope.row.majorList">{{it}}</div>
					</template> -->
			</el-table-column>
			<!-- <el-table-column width="" label="公司logo" align="center" prop="">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 40px" :src="scope.row.showLogo"
						:preview-src-list="scope.row.showLogo">
					</el-image>
				</template>
			</el-table-column> -->
			<el-table-column show-overflow-tooltip width="" label="公司名称" align="center" prop="name">
				<!-- <template slot-scope="scope">
					<div>{{scope.row.companyList[0].name}}</div>
				</template> -->
			</el-table-column>
			<el-table-column show-overflow-tooltip width="" label="公司类型" align="center" prop="gyqy">
				<!-- <template slot-scope="scope">
					<div>{{scope.row.companyList[0].classifyCn}}</div>
				</template> -->
			</el-table-column>
			<el-table-column show-overflow-tooltip width="" label="公司行业" align="center" prop="industryCn">
				<!-- 	<template slot-scope="scope">
					<div>{{scope.row.companyList[0].industryCn}}</div>
				</template> -->
			</el-table-column>
			<el-table-column width="200" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="success" style="padding: 10px 10px;"
						@click="handleDetail(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<el-dialog title="详情" :visible.sync="DetailVisible" width="70%" :close-on-click-modal="false">
			<el-descriptions class="margin-top" title="详情信息" :column="1" border>
				<el-descriptions-item>
					<template slot="label">
						岗位名称
					</template>
					{{userDetail.jobName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						岗位类型
					</template>
					{{userDetail.natureCn}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						招聘时间
					</template>
					{{userDetail.startTime}} - {{userDetail.endTime}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						投递链接
					</template>
					{{userDetail.website}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						工作地点
					</template>
					{{userDetail.addrsss}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						学历要求
					</template>
					{{userDetail.educationCn}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						专业要求
					</template>
					{{userDetail.majorCn}}
				</el-descriptions-item>

				<!-- <el-descriptions-item>
					<template slot="label">
						头像
					</template>
					<el-image style="width: 40px; height: 40px" :src="userDetail.headimgurl"
						:preview-src-list="userDetail.imgs">
					</el-image>
				</el-descriptions-item> -->
				<el-descriptions-item>
					<template slot="label">
						公司名称
					</template>
					{{userDetail.name}}
				</el-descriptions-item>

				<el-descriptions-item>
					<template slot="label">
						公司类型
					</template>
					{{userDetail.gyqy}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						公司行业
					</template>
					{{userDetail.industryCn}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						岗位要求
					</template>
					<span v-html="userDetail.contents"></span>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>


	</div>
</template>

<script>
	import {
		gwAllApi,
		cpDetail,
		dqApi,
		xlApi,
		zyApi,
		bkAndDzApi,
		ssApi
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				props: { 
					// multiple: true,
					value:'name',
					label:'name'
				},
				propss: {
					// multiple: true,
					value:'name',
					label:'name'
				},
				valueS: [],
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					id:'',
					companyName:'',
					adders: [], // 地区
					majorcnList: [], // 专业类型
					qylx: [], //企业类型
					naturecnList: [], // 岗位类型
					educationcn: '', // 学历
					jobName: '', // 岗位名称
					contents: '', // 详情内容
					majorContentsList: [], //专业和详情内容 majorcnList
					xsand:'' ,// 学硕还是专硕
					bxzy:''
				},
				dialogVisible: false,
				userList: [], //存取后端获取客户列表
				DetailVisible: false,
				userDetail: {},
				addList: [], //地址数据
				zyList: [], // 专业数据
				xlList: [], // 学历数据
				gwList: [{
						idd: 1,
						name: '校招',
						state: false
					},
					{
						idd: 2,
						name: '社招',
						state: false
					},
					{
						idd: 3,
						name: '实习',
						state: false
					},
					{
						idd: 4,
						name: '全职',
						state: false
					}
				],
				lxList: [{
						idd: 0,
						name: '国企',
						state: false
					},
					{
						idd: 1,
						name: '上市公司',
						state: false
					},
					{
						idd: 2,
						name: '其他',
						state: false
					},
					{
						idd: 3,
						name: '股份制企业',
						state: false
					},
					{
						idd: 4,
						name: '外商独资',
						state: false
					},
					{
						idd: 5,
						name: '中外合资',
						state: false
					},
					{
						idd: 7,
						name: '民营企业',
						state: false
					},
					{
						idd: 8,
						name: '港澳台投资',
						state: false
					},
					{
						idd: 9,
						name: '非营利组织',
						state: false
					},
					{
						idd: 10,
						name: '医院',
						state: false
					},
					{
						idd: 11,
						name: '法定机构',
						state: false
					},
					{
						idd: 12,
						name: '民办非企业',
						state: false
					},
					{
						idd: 15,
						name: '银行',
						state: false
					},
				],
				options: [], // 本科或大专 专业数据
				xsArr:[
					{
						id:1,
						name:'学硕'
					},
					{
						id:2,
						name:'专硕'
					}
				],
				optionsZ:[] // 硕士专业数据
			};
		},
		created() {
			this.getList();
			this.getdqApi()
			this.getxlApi()
			this.getzyApi()
			this.getbkAndDzApi()
			console.log(this.$store.state.user.nickName, 'nickName');
		},
		methods: {
			// 学硕或专硕选择
			sslxChange(e){
				console.log(e,'eeeeeeeeeeeeeeeeee');
				this.getssApi(e)
			},
			xlchange(){
				this.queryParams.xsand = ''
			},
			getssApi(e){
				let data = {
					className: e
				}
				ssApi(data).then(res=>{
					console.log(res,'硕士专业');
					this.optionsZ = res.data
				})
			},
			getbkAndDzApi(){
				bkAndDzApi().then(res=>{
					console.log(res,'本科and大专专业');
					this.options = res.data
				})
			},
			handleChange(value) {
				console.log(value);
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('web/order/export', {
					...this.queryParams
				}, `订单.xlsx`)
			},
			getdqApi() {
				dqApi().then(res => {
					console.log(res, '地区');
					this.addList = res.data
				})
			},
			getxlApi() {
				xlApi().then(res => {
					console.log(res, '学历');
					this.xlList = res.data
				})
			},
			getzyApi() {
				zyApi().then(res => {
					console.log(res, '专业');
					this.zyList = res.data
				})
			},
			prBg(row) {
				console.log(row, 'row');
				if (row.reportUrl) {
					window.open(`${row.reportUrl}`);
				} else {
					this.$modal.msgWarning("此用户未生成报告");
				}
			},
			// 详情
			handleDetail(e) {
				console.log(e);
				this.userDetail = e
				// cpDetail(e.openid).then(res=>{
				// 	console.log(res,'res');
				// })
				this.DetailVisible = true
			},

			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				gwAllApi(this.queryParams).then(response => {
					console.log(response, 'response');
					response.rows.forEach(it => {
						it.imgs = []
						it.imgs.push(it.headimgurl)
					})
					this.userList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				console.log(this.queryParams,'ooooooooooooooooooooooo');
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						id:'',
						companyName:'',
						adders: [], // 地区
						majorcnList: [], // 专业类型
						qylx: [], //企业类型
						naturecnList: [], // 岗位类型
						educationcn: '', // 学历
						jobName: '', // 岗位名称
						contents: '', // 详情内容
						majorContentsList: [], //专业和详情内容 majorcnList
						xsand:'' ,// 学硕还是专硕
						bxzy:''
					},
					this.handleQuery();
			},
		}
	};
</script>
<style scoped>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}

	::v-deep .el-descriptions-row th {
		width: 100px;
	}
</style>